<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>每周课表</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
	<link rel="stylesheet" href="css/main.css">
	<link rel="stylesheet" href="./student/css/head.css">
	<link rel="stylesheet" href="./css/window.css">
	<link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css" />
	<style scoped>
		[v-cloak] {
			display: none;
		}

		.date_box {
			width: 90%;
			margin: 20px auto;
			background-color: white;
			border-radius: 6px;
			box-shadow: 0 0 30px #e8e8e8;
		}

		.date {
			height: 38px;
			width: 95%;
			padding: 6px 0;
			display: flex;
			align-items: center;
			margin: 0 auto;
			justify-content: space-between;
		}

		.left,
		.right {
			width: 40px;
			text-align: center;
		}

		.time {
			font-size: 16px;
			text-align: center;
			border-radius: 5px;
			display: flex;
			align-items: center;
		}

		.course {
			width: 96%;
			margin: 0 2%;
			margin-top: 10px;
			height: 40px;
			border-radius: 5px;
			text-align: center;
			line-height: 40px;
			background-color: #EEEDFF;
			text-overflow: ellipsis;
			white-space: nowrap;
			overflow: hidden;
		}

		.border {
			width: 90%;
			margin: 0px auto;
			height: 1px;
			background: linear-gradient(to right, #fff, #ededed, #fff);
		}

		.interval {
			font-size: 14px;
			font-weight: bold;
		}

		.day_box {
			width: 86%;
			margin: 0 auto;
			padding: 6px 0;
			display: flex;
			justify-content: space-between;
		}

		.day {
			padding: 5px;
			border-radius: 50%;
		}

		.daySelect {
			color: white;
			background-color: #fec327;
		}

		.kecheng_box {
			width: 90%;
			margin: 20px auto;
			background-color: white;
			border-radius: 6px;
			box-shadow: 0 0 30px #e8e8e8;
			max-height: 580px;
			overflow-y: auto;
			position: relative;
		}

		.classSelect {
			position: static;
			top: 0px;
			left: 0px;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 15px;
			padding: 12px;
			border-bottom: 2px solid #e0e0e0;
		}

		.kechng_item {
			display: flex;
			padding: 20px;
			align-items: center;
			justify-content: space-between;

		}

		.kechng_item_left {
			font-size: 11px;
			width: 49%;
		}

		.kechng_item_right {
			font-size: 11px;
			width: 50%;
			border-radius: 6px;
			padding: 15px 20px;
			box-sizing: border-box;
			text-align: left;
			color: white;
			letter-spacing: 2px;
			background-color: #3e9cfb;
		}

		.kechng_item_right .text1 {
			font-size: 20px;
			font-weight: bold;
			padding-bottom: 6px;
		}

		.mask_box {
			border-radius: 8px;
			border: 1px solid #e1e1e1;
		}
		.mask_item_title{
			padding: 15px;
			border-bottom: 1px solid #e1e1e1;
		}
		.mask_item_content_tb{
			padding: 11px;
			font-size: 13px;
		}
		.mask_item_content_tb:nth-child(2n-1){
			background-color: #f5f5f5;
		}
		.mask_item_content_tb_select{
			background-color: #3e9cfb !important;
			color: white;
		}
		.confirmBtn{
			padding: 4px;
			font-size: 18px;
			color: white;
			background: linear-gradient(to bottom, #fda742,#fcbf29);
			border-radius: 8px;
			margin-top: 20px;
		}
		.cancel{
			width: 28px;
			height: 28px;
			margin: 10px auto;
			border-radius: 50%;
			background-image: url('./image/img/quxiao1.png');
			background-size: 100% 100%;
		}



		.subject {
			margin-left: 1em;
		}

		.choose-class {
			height: 25px;
			width: 50%;
			padding-left: 5px;
			/*margin: 0 25%;*/
			margin-top: 10px;
			margin-left: -5px;
		}
	</style>
</head>

<body>
	<div style="height: 40px;"></div>
	<div class="header">
		<div class="header_title">每周课表</div>
		<img src="image/return.png" alt="" class="return" onclick="history.back()">
	</div>
	<div id="vue-root" v-cloak style="text-align: center">
		<div class="date_box">
			<div class="date">
				<div class="left" @click="subtract()"><van-icon name="arrow-left" size="17" /></div>
				<div class="time">
					<div style="font-size: 16px;" v-text="date1"></div>
					<div style="margin-left: 4px;" v-text="day"></div>
				</div>
				<div class="right" @click="add()"><van-icon name="arrow" size="17" /></div>
			</div>
			<div class="border"></div>
			<div class="day_box">
				<div class="day" :class="{'daySelect':selectDay==item.day}" v-for="item in dayList" :key="item.day"
					@click="changDay(item)">
					{{item.day}}
				</div>
			</div>
		</div>
		<div class="kecheng_box">
			<!-- <div class="classSelect" @click="mask=true"  v-if="isTeacher">
				选择班级<van-icon name="arrow-down" size="17" />
			</div> -->
			<div class="kechng_item" v-for="lesson in lesson1" :key="lesson.id">
				<div class="kechng_item_left">
					<div class="text1">
						<span>开始时间</span>
						<span style="font-size: 13px;margin-left: 4px;">{{ lesson.startTime }}</span>
					</div>
					<div class="text1">
						<span>结束时间</span>
						<span style="font-size: 13px;margin-left: 4px;">{{ lesson.endTime }}</span>
					</div>
				</div>
				<div class="kechng_item_right">
					<div class="text1">
						{{lesson.courseName}}
					</div>
					<div class="text2">
						任课老师：{{lesson.teacherName}}
					</div>
				</div>
			</div>
		</div>
		<div class="mask_layer" v-if="mask">
			<div class="mask_item" style="width: 77%;padding: 30px;">
				<div class="mask_box">
					<div class="mask_item_title">选择班级<van-icon name="arrow-down" color="#e1e1e1" size="17" /></div>
					<div class="mask_item_content">
						<div class="mask_item_content_tb" v-for="(item,i) in classess" :key="i"
						:class="{'mask_item_content_tb_select':classesId==item.id}" @click="classesId=item.id">
							<span class="mask_item_content_tb_tr borderRight">{{item.name}}</span>
						</div>
					</div>
				</div>
				<div class="confirmBtn" @click="confirmBtn()">确定</div>
			</div>
			<div class="cancel" @click="mask=false" />
		</div>
	</div>

	<script src="/scriptZIP/vue.min.js"></script>
	<script src="/scriptZIP/axios.min.js"></script>
	<script src="/scriptZIP/dayjs.min.js"></script>
	<script src="/scriptZIP/zh-cn.min.js"></script>
	<script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>

	<script src="/js/common.js"></script>

	<script>
		// Vue.use(vant.Lazyload);
		dayjs.locale('zh-cn');
		// var student = getStudent();
		// var schoolId=student.schoolId;
		var agengtId=localStorage.getItem('agentId');
		var app = new Vue({
			el: '#vue-root',
			data: {
				date: new Date(),
				classesId: null,
				isTeacher: isTeacher(),
				classess: [
					{name:'一年级',id:123},
					{name:'一年级',id:636},
					{name:'一年级',id:963}
				],
				lessons: [],
				lesson1: [],
				courses: {},
				periods: {},
				dayList: [],
				mask: false,
				selectDay: null,
				schoolId: getPerson().schoolId,
			},
			created: function () {
				this.fetchLessonData();
				// var url = (this.isTeacher ? '/t' : '/s') + '/course/all/'+agengtId;
				// axios.get(url).then(function (res) {
				// 	res.data.forEach(function (it) {
				// 		this.courses[it.id] = it.name;
				// 	}.bind(this));
				// }.bind(this));
				url = (this.isTeacher ? '/t' : '/s') + '/lessonPeriod/all';
				axios.get(url).then(function (res) {
					res.data.forEach(function (it) {
						this.periods[it.id] = it.name;
					}.bind(this));
				}.bind(this));

				this.getData();

				if (this.isTeacher) {
					axios.get('/t/classes').then(function (res) {
						this.classess = res.data;
					}.bind(this));
				} 
				// else {
				// 	axios.get('/s/timetable').then(function (res) {
				// 		this.lessons = res.data.lessons || [];
				// 	}.bind(this));
				// }
				this.dayList = this.getSurroundingDates()
				this.$watch('date', function (newVal, oldVal) {
        if (newVal !== oldVal) {
            this.fetchLessonData();
        }
    });
			},
			methods: {
				fetchLessonData() {
                    const dateFormatted = dayjs(this.date).format('YYYY-MM-DD');
					var url = (this.isTeacher ? '/t' : '/s') +'/lessonTime/getTime/'+this.schoolId+'?date='+dateFormatted;
                    // var url = `/s/lessonTime/getTime/`+schoolId+'?date='+dateFormatted;
                    axios.get(url)
                        .then(response => {
                            this.lesson1 = response.data;
                        });
                        
                },
				getSurroundingDates: function () {
				
					const today = this.date;
					const dates = [];

					// 获取前三天
					for (let i = 3; i > 0; i--) {
						const date = new Date(today.getFullYear(), today.getMonth(), today.getDate() - i);
						dates.push({ date1: date.toLocaleDateString(), date2: date, day: dayjs(date).format('DD') });
					}

					// 添加今天的日期
					dates.push({ date1: today.toLocaleDateString(), date2: today, day: dayjs(today).format('DD') });

					// 获取后三天
					for (let i = 1; i <= 3; i++) {
						const date = new Date(today.getFullYear(), today.getMonth(), today.getDate() + i);
						dates.push({ date1: date.toLocaleDateString(), date2: date, day: dayjs(date).format('DD') });
					}
					this.selectDay = dayjs(today).format('DD');
					return dates;
				},
				add: function () {
					this.date = dayjs(this.date).add(1, 'day').toDate();
					this.dayList = this.getSurroundingDates()
				},
				changDay: function (item) {
					this.date = item.date2;
					this.dayList = this.getSurroundingDates()
				},
				subtract: function () {
					this.date = dayjs(this.date).subtract(1, 'day').toDate();
					this.dayList = this.getSurroundingDates()
				},
				getData: function () {
					if (!this.isTeacher) return;
					if (!this.classesId) return;
					axios.get('/t/timetable/' + this.classesId).then(function (res) {
						this.lessons = res.data.lessons || [];
					}.bind(this));
				},
				confirmBtn:function (){
					this.mask=false;
					this.getData()
				}
			},
			computed: {

				day: function () {
					return dayjs(this.date).format('dddd');
				},
				date1: function () {
					return dayjs(this.date).format('YYYY年MM月DD日');
				},
				list: function () {
					return this.lessons[(dayjs(this.date).get('day') + 6) % 7]
				}
			}
		});

	</script>
</body>

</html>